<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>生命周期</title>
    <script type="text/javascript" src="./vue.js"></script>
  </head>
  <body>
    <div id="demo">
      <h2 id="title">当前的n值是：{{n}}</h2>
      <button @click="add" id="btn">点我n+1</button>
      <button @click="death">毁灭吧</button>
    </div>

    <script type="text/javascript">
      let vm = new Vue({
        el:'#demo',
        // template:'<h2>你好,{{n}}</h2>',
        data:{n:1},
        methods:{
          add(){
            console.log('你点了加')
            this.n += 1
            console.log(this.n)
          },
          death(){
            this.$destroy()
          }
        },
        watch:{
          n(){
            console.log('n变化了')
          }
        },
        beforeCreate() {
          console.log('数据代理、数据劫持创建之前 --- beforeCreate')
        },
        created() {
          console.log('数据代理、数据劫持创建完毕 --- created')
        },
        beforeMount() {
          console.log('挂载之前 --- beforeMount')
        },
        mounted() {
          console.log('挂载完毕 --- mounted')
          // document.getElementById('btn').innerText = '哈哈'
        },
        beforeUpdate() {
          console.log('更新之前 --- beforeUpdate')
          // console.log(this.n)
          // console.log(document.getElementById('title'))
        },
        updated() {
          console.log('更新完毕 --- updated')
          // console.log(this.n)
          // console.log(document.getElementById('title'))
          // debugger;
        },
        beforeDestroy() {
          console.log('销毁之前 --- beforeDestroy')
          this.add()
        },
        destroyed() {
          console.log('销毁完毕 --- destroyed')
        },
      })
      
    </script>
  </body>
</html>